import { ImageResponse } from 'next/og';
import { api, safe } from '@/lib/api';
import { fmtInt } from '@/lib/format';

export const alt = 'Constellation summary — SatelliteIndex';
export const size = { width: 1200, height: 630 };
export const contentType = 'image/png';

const ORBIT_HEX: Record<string, string> = { LEO: '#38d3ff', MEO: '#8f7dff', GEO: '#f5b544', HEO: '#ff7ab6' };

export default async function Image({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const res = await safe(api.constellation(slug));
  const d = res?.data ?? null;
  const orbit = d?.orbit_class ?? 'MIXED';
  const color = ORBIT_HEX[orbit] ?? '#7c869e';

  return new ImageResponse(
    (
      <div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', padding: 64, background: 'linear-gradient(135deg, #060912 0%, #0b1020 60%, #111830 100%)', color: '#eaf0ff', fontFamily: 'sans-serif' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, fontSize: 26, letterSpacing: 4, textTransform: 'uppercase', color: '#a3aec8' }}>
            <div style={{ width: 14, height: 14, borderRadius: 999, background: '#38d3ff' }} />
            <div>SatelliteIndex · Constellation</div>
          </div>
          <div style={{ display: 'flex', padding: '8px 18px', borderRadius: 8, border: `2px solid ${color}`, color, fontSize: 28, fontWeight: 700 }}>{orbit}</div>
        </div>

        {d ? (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            <div style={{ fontSize: d.name.length > 28 ? 60 : 84, fontWeight: 700, letterSpacing: -2, lineHeight: 1 }}>{d.name}</div>
            <div style={{ fontSize: 34, color: '#a3aec8' }}>{`${d.operator_name ?? 'Operator unavailable'}${d.country_name ? ` · ${d.country_name}` : ''}`}</div>
          </div>
        ) : (
          <div style={{ fontSize: 72, fontWeight: 700 }}>Constellation</div>
        )}

        <div style={{ display: 'flex', gap: 56, borderTop: '1px solid rgba(160,180,230,0.28)', paddingTop: 28 }}>
          {[
            { label: 'Active satellites', value: d ? fmtInt(d.active) : '—', c: '#38d17f' },
            { label: 'Total launched', value: d ? fmtInt(d.total) : '—', c: '#eaf0ff' },
            { label: 'Launched 365 d', value: d ? fmtInt(d.launched_last_365d) : '—', c: '#eaf0ff' },
            { label: 'Launches', value: d ? fmtInt(d.launches) : '—', c: '#eaf0ff' },
          ].map((k) => (
            <div key={k.label} style={{ display: 'flex', flexDirection: 'column' }}>
              <div style={{ fontSize: 20, letterSpacing: 3, textTransform: 'uppercase', color: '#6b7694' }}>{k.label}</div>
              <div style={{ fontSize: 56, fontWeight: 700, color: k.c, marginTop: 6 }}>{k.value}</div>
            </div>
          ))}
        </div>
      </div>
    ),
    size,
  );
}